<template>
  <div>
    <r-table
      :isHandle="true"
      :isBorder="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tableHandles="tableHandles"
      :treeProps="{ children: 'children', hasChildren: 'hasParent' }"
    />

    <r-form
      :isHandle="true"
      :formRules="formRules"
      :formCols="formCols"
      :formHandle="formHandle"
      :formData="formData"
      labelWidth="100px"
      dialogWidth="550px"
      :destroy="false"
      :inline="false"
      ref="elForm"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      tableCols: [
        { label: "菜单Name", prop: "text", align: "left" },
        { label: "上级目录", prop: "parentLabel", align: "left", width: 400 },
        { label: "排序", prop: "orderNum", align: "left", width: 200 },
        {
          label: "Operations",
          type: "button",
          width: 200,
          btnList: [
            {
              type: "primary",
              size: "mini",
              label: "Edit",
              handle: row => this.elFormDetail(row)
            },
            {
              type: "danger",
              size: "mini",
              label: "Delete",
              handle: row => this.TableDel("/sysMenu/remove", { id: row.id })
            }
          ]
        }
      ],
      tableHandles: [
        {
          label: "Add菜单",
          type: "primary",
          handle: that => this.elFormVisible()
        }
      ],
      formData: {
        menuName: "",
        menuLable: "目录",
        parentId: 0,
        orderNum: 0,
        type: 0,
        path: ""
      },
      formCols: [
        //{ type: "radio", label: "Type", width: 350, prop: "type",radios:[{label:'菜单',value:1},{label:'按钮',value:2}] },
        { type: "input", label: "菜单Name", width: 350, prop: "menuName" },
        {
          type: "popover",
          label: "上级目录",
          prop: "menuLable",
          width: 350,
          options: [],
          handleNodeClick: e => this.nodeClick(e)
        },
        { type: "number", label: "排序", prop: "orderNum", width: 200 },
        { type: "input", label: "路由", width: 350, prop: "path" }
      ],
      formRules: {
        menuName: [
          { required: true, message: "Please Input角色Name", trigger: "blur" }
        ],
        menuLable: [
          {
            required: true,
            message: "Please Select上级目录",
            trigger: "change"
          }
        ]
      },
      formHandle: [
        {
          label: "确认",
          type: "primary",
          icon: "el-icon-circle-plus-outline",
          handle: e => this.elFormSubmit()
        },
        {
          label: "Cancel",
          icon: "el-icon-circle-close",
          handle: e => this.elFormVisible()
        }
      ]

      // data: [
      //   {
      //     id: 1,
      //     label: "基础资料",
      //     children: [
      //       {
      //         id: 3,
      //         label: "我的客户",
      //       },
      //     ],
      //   },
      //   {
      //     id: 2,
      //     label: "仓库管理",
      //     children: [
      //       {
      //         id: 4,
      //         label: "采购收货",
      //       },
      //       {
      //         id: 6,
      //         label: "其它出库",
      //       },
      //     ],
      //   },
      // ],
    };
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.$http.get("/sysMenu/getListAll").then(({ data }) => {
        this.tableData = data;
        data.forEach(item => {
          item.orderNum = item.attributes.orderNum;
          item.children.forEach(i => {
            delete i.children;
            i.parentLabel = item.text;
            i.orderNum = i.attributes.orderNum;
          });
        });
        this.formCols[this.labIndex(this.formCols, "上级目录")].options = data;
      });
    },
    nodeClick(data) {
      this.formData.menuLable = data.text;
      this.formData.parentId = data.id;
    },
    elFormDetail(row) {
      Object.keys(this.formData).forEach(key => {
        this.formData[key] = row[key];
      });
      this.formData.id = row.id;
      this.formData.menuName = row.text;
      this.formData.path = row.attributes.url;
      let menuLable = "";
      if (row.parentId != 0) {
        let arr = this.formCols[this.labIndex(this.formCols, "上级目录")]
          .options;
        let idx = arr.map(item => item.id).indexOf(row.parentId);
        menuLable = arr[idx].text;
      } else {
        menuLable = "目录";
      }
      this.formData.menuLable = menuLable;
      this.elFormVisible();
    },
    elFormSubmit() {
      this.$refs.elForm.$refs.ruleForm.validate(valid => {
        if (valid) {
          let api = this.formData.id ? "/sysMenu/update" : "/sysMenu/add";
          this.$http.post(api, this.formData).then(res => {
            if (res && res.code == 200) {
              this.$message({
                type: "success",
                message: this.formData.id ? "EditSuccess!" : "AddSuccess!",
                duration: 1300,
                onClose: res => {
                  this.elFormVisible();
                  this.init();
                }
              });
            }
          });
        }
      });
    }
  }
};
</script>

<style scoped lang="scss"></style>
